<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="发票号:">
        <el-input v-model="queryParams.invoiceNo" size="small" placeholder="请输入发票号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="业务订单号:">
        <el-input v-model="queryParams.basicNo" size="small" placeholder="请输入发票号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker v-model="queryParams.createTime" type="date" placeholder="选择创建时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermission="['module:accountingAr:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['module:accountingAr:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['module:accountingAr:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col>
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="发票号" align="center" prop="invoiceNo" />
      <el-table-column label="支付流水号" align="center" prop="slipNo" />
      <el-table-column label="支付状态" align="center" prop="status" />
      <el-table-column label="财务审核状态" align="center" prop="fixStatus" />
      <el-table-column label="业务订单号" align="center" prop="basicNo" />

      <el-table-column label="付款收款人" align="center" prop="payCust" />
      <el-table-column label="付款人" align="center" prop="billToCust" />
      <el-table-column label="是否合作伙伴" align="center" prop="ptnrYn" />
      <el-table-column label="凭证日期" align="center" prop="slipDt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.slipDt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发票类型" align="center" prop="invoiceType" />
      <el-table-column label="税务类型" align="center" prop="taxType" />
      <el-table-column label="结算货币金额" align="center" prop="amtCur" />
      <el-table-column label="业务时机" align="center" prop="jobDate" />
      <el-table-column label="汇率" align="center" prop="exrate" />
      <el-table-column label="结算货币" align="center" prop="curr" />
      <el-table-column label="结算汇率" align="center" prop="rate" />
      <el-table-column label="结算数量" align="center" prop="wtCnt" />
      <el-table-column label="结算科目编码" align="center" prop="frtCd" />
      <el-table-column label="结算科目名称" align="center" prop="frtNm" />
      <el-table-column label="发票日期" align="center" prop="invoiceDt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.invoiceDt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="物料编码" align="center" prop="cargoObjectNo" />
      <el-table-column label="物料名称" align="center" prop="cargoObjectName" />
      <el-table-column label="金额" align="center" prop="amount" />
      <el-table-column label="已付款金额" align="center" prop="paiedFee" />

      <el-table-column label="对应应收" align="center" prop="amtAr" />

      <el-table-column label="合同总额" align="center" prop="contractAmount" />
      <el-table-column label="合同单价" align="center" prop="contractRate" />
      <el-table-column label="付款类型" align="center" prop="paymentType" />
      <el-table-column label="对账对象" align="center" prop="settlementApplicant" />
      <el-table-column label="回单日期" align="center" prop="returnTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="结算基于" align="center" prop="settleBasedOn" />
      <el-table-column label="结算基于单位" align="center" prop="settleBasedOnUnit" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermission="['module:accountingAr:update']" size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button v-hasPermission="['module:accountingAr:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 添加/修改对话框 -->
    <el-dialog :title="accountingArFormDialog.title" :visible.sync="accountingArFormDialog.visible" :close-on-click-modal="false" :before-close="resetAccountingArFormDialog" width="500px" append-to-body>
      <el-form ref="accountingArForm" :model="accountingArFormData" :rules="accountingArFormRules" label-width="80px">
        <el-form-item label="发票号" prop="invoiceNo">
          <el-input v-model="accountingArFormData.invoiceNo" placeholder="请输入发票号" />
        </el-form-item>
        <el-form-item label="支付流水号" prop="slipNo">
          <el-input v-model="accountingArFormData.slipNo" placeholder="请输入支付流水号" />
        </el-form-item>
        <el-form-item label="业务单据号码" prop="basicNo">
          <el-input v-model="accountingArFormData.basicNo" placeholder="请输入业务单据号码" />
        </el-form-item>
        <el-form-item label="业务单据序列号" prop="orderSeqNo">
          <el-input v-model="accountingArFormData.orderSeqNo" placeholder="请输入业务单据序列号" />
        </el-form-item>
        <el-form-item label="业务单据明细序列号" prop="orderItemNo">
          <el-input v-model="accountingArFormData.orderItemNo" placeholder="请输入业务单据明细序列号" />
        </el-form-item>
        <el-form-item label="凭证结算号" prop="acItemId">
          <el-input v-model="accountingArFormData.acItemId" placeholder="请输入凭证结算号" />
        </el-form-item>
        <el-form-item label="所属域" prop="site">
          <el-input v-model="accountingArFormData.site" placeholder="请输入所属域" />
        </el-form-item>
        <el-form-item label="业务类别" prop="bizKind">
          <el-input v-model="accountingArFormData.bizKind" placeholder="请输入业务类别" />
        </el-form-item>
        <el-form-item label="业务结算部门" prop="bizUnit">
          <el-input v-model="accountingArFormData.bizUnit" placeholder="请输入业务结算部门" />
        </el-form-item>
        <el-form-item label="结算账套" prop="accUnit">
          <el-input v-model="accountingArFormData.accUnit" placeholder="请输入结算账套" />
        </el-form-item>
        <el-form-item label="部门" prop="branchUnit">
          <el-input v-model="accountingArFormData.branchUnit" placeholder="请输入部门" />
        </el-form-item>
        <el-form-item label="付款收款人" prop="payCust">
          <el-input v-model="accountingArFormData.payCust" placeholder="请输入付款收款人" />
        </el-form-item>
        <el-form-item label="付款人" prop="billToCust">
          <el-input v-model="accountingArFormData.billToCust" placeholder="请输入付款人" />
        </el-form-item>
        <el-form-item label="是否合作伙伴" prop="ptnrYn">
          <el-input v-model="accountingArFormData.ptnrYn" placeholder="请输入是否合作伙伴" />
        </el-form-item>
        <el-form-item label="凭证日期" prop="slipDt">
          <el-date-picker v-model="accountingArFormData.slipDt" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择凭证日期" clearable />
        </el-form-item>
        <el-form-item label="结算货币金额" prop="amtCur">
          <el-input v-model="accountingArFormData.amtCur" placeholder="请输入结算货币金额" />
        </el-form-item>
        <el-form-item label="业务时机" prop="jobDate">
          <el-input v-model="accountingArFormData.jobDate" placeholder="请输入业务时机" />
        </el-form-item>
        <el-form-item label="汇率" prop="exrate">
          <el-input v-model="accountingArFormData.exrate" placeholder="请输入汇率" />
        </el-form-item>
        <el-form-item label="结算货币" prop="curr">
          <el-input v-model="accountingArFormData.curr" placeholder="请输入结算货币" />
        </el-form-item>
        <el-form-item label="结算汇率" prop="rate">
          <el-input v-model="accountingArFormData.rate" placeholder="请输入结算汇率" />
        </el-form-item>
        <el-form-item label="结算数量" prop="wtCnt">
          <el-input v-model="accountingArFormData.wtCnt" placeholder="请输入结算数量" />
        </el-form-item>
        <el-form-item label="结算科目编码" prop="frtCd">
          <el-input v-model="accountingArFormData.frtCd" placeholder="请输入结算科目编码" />
        </el-form-item>
        <el-form-item label="结算科目名称" prop="frtNm">
          <el-input v-model="accountingArFormData.frtNm" placeholder="请输入结算科目名称" />
        </el-form-item>
        <el-form-item label="发票日期" prop="invoiceDt">
          <el-date-picker v-model="accountingArFormData.invoiceDt" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择发票日期" clearable />
        </el-form-item>
        <el-form-item label="附加费总额" prop="totFsc">
          <el-input v-model="accountingArFormData.totFsc" placeholder="请输入附加费总额" />
        </el-form-item>
        <el-form-item label="附加费率" prop="fuelRate">
          <el-input v-model="accountingArFormData.fuelRate" placeholder="请输入附加费率" />
        </el-form-item>
        <el-form-item label="里程" prop="miles">
          <el-input v-model="accountingArFormData.miles" placeholder="请输入里程" />
        </el-form-item>
        <el-form-item label="财务对账ID" prop="invSettleId">
          <el-input v-model="accountingArFormData.invSettleId" placeholder="请输入财务对账ID" />
        </el-form-item>
        <el-form-item label="财务结算ID" prop="settlementId">
          <el-input v-model="accountingArFormData.settlementId" placeholder="请输入财务结算ID" />
        </el-form-item>
        <el-form-item label="备用单据号" prop="billNo">
          <el-input v-model="accountingArFormData.billNo" placeholder="请输入备用单据号" />
        </el-form-item>
        <el-form-item label="是否来自费率表" prop="autoYn">
          <el-input v-model="accountingArFormData.autoYn" placeholder="请输入是否来自费率表" />
        </el-form-item>
        <el-form-item label="账期" prop="pcTerm">
          <el-input v-model="accountingArFormData.pcTerm" placeholder="请输入账期" />
        </el-form-item>
        <el-form-item label="物料编码" prop="cargoObjectNo">
          <el-input v-model="accountingArFormData.cargoObjectNo" placeholder="请输入物料编码" />
        </el-form-item>
        <el-form-item label="物料名称" prop="cargoObjectName">
          <el-input v-model="accountingArFormData.cargoObjectName" placeholder="请输入物料名称" />
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="accountingArFormData.amount" placeholder="请输入金额" />
        </el-form-item>
        <el-form-item label="已付款金额" prop="paiedFee">
          <el-input v-model="accountingArFormData.paiedFee" placeholder="请输入已付款金额" />
        </el-form-item>
        <el-form-item label="对应应收" prop="amtAr">
          <el-input v-model="accountingArFormData.amtAr" placeholder="请输入对应应收" />
        </el-form-item>
        <el-form-item label="未付款金额" prop="remainedAmount">
          <el-input v-model="accountingArFormData.remainedAmount" placeholder="请输入未付款金额" />
        </el-form-item>
        <el-form-item label="源头客户名称" prop="originalCustName">
          <el-input v-model="accountingArFormData.originalCustName" placeholder="请输入源头客户名称" />
        </el-form-item>
        <el-form-item label="批号" prop="batchWorkorderNo">
          <el-input v-model="accountingArFormData.batchWorkorderNo" placeholder="请输入批号" />
        </el-form-item>
        <el-form-item label="发货单位" prop="shippedQtyUnit">
          <el-input v-model="accountingArFormData.shippedQtyUnit" placeholder="请输入发货单位" />
        </el-form-item>
        <el-form-item label="发货人姓名" prop="shipperName">
          <el-input v-model="accountingArFormData.shipperName" placeholder="请输入发货人姓名" />
        </el-form-item>
        <el-form-item label="合同总额" prop="contractAmount">
          <el-input v-model="accountingArFormData.contractAmount" placeholder="请输入合同总额" />
        </el-form-item>
        <el-form-item label="合同单价" prop="contractRate">
          <el-input v-model="accountingArFormData.contractRate" placeholder="请输入合同单价" />
        </el-form-item>
        <el-form-item label="对账对象" prop="settlementApplicant">
          <el-input v-model="accountingArFormData.settlementApplicant" placeholder="请输入对账对象" />
        </el-form-item>
        <el-form-item label="回单日期" prop="returnTime">
          <el-date-picker v-model="accountingArFormData.returnTime" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择回单日期" clearable />
        </el-form-item>
        <el-form-item label="源头订单明细编码" prop="sourceItemId">
          <el-input v-model="accountingArFormData.sourceItemId" placeholder="请输入源头订单明细编码" />
        </el-form-item>
        <el-form-item label="要求运费" prop="askedTransitFee">
          <el-input v-model="accountingArFormData.askedTransitFee" placeholder="请输入要求运费" />
        </el-form-item>
        <el-form-item label="结算基于" prop="settleBasedOn">
          <el-input v-model="accountingArFormData.settleBasedOn" placeholder="请输入结算基于" />
        </el-form-item>
        <el-form-item label="结算基于单位" prop="settleBasedOnUnit">
          <el-input v-model="accountingArFormData.settleBasedOnUnit" placeholder="请输入结算基于单位" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAccountingArFormDialog">确 定</el-button>
        <el-button @click="resetAccountingArFormDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AccountingArApi from '@/api/accounting/AccountingArApi'

const defaultAccountingArFormData = {
  invoiceNo: null,
  slipNo: null,
  status: '0',
  fixStatus: '0',
  basicNo: null,
  orderSeqNo: null,
  orderItemNo: null,
  acItemId: null,
  site: null,
  bizKind: null,
  bizUnit: null,
  accUnit: null,
  branchUnit: null,
  payCust: null,
  billToCust: null,
  ptnrYn: null,
  slipDt: null,
  invoiceType: null,
  taxType: null,
  amtCur: null,
  jobDate: null,
  exrate: null,
  curr: null,
  rate: null,
  wtCnt: null,
  frtCd: null,
  frtNm: null,
  invoiceDt: null,
  totFsc: null,
  fuelRate: null,
  miles: null,
  invSettleId: null,
  settlementId: null,
  billNo: null,
  inputType: null,
  autoYn: null,
  pcTerm: null,
  cargoObjectNo: null,
  cargoObjectName: null,
  amount: null,
  paiedFee: null,
  consigneeName: null,
  amtAr: null,
  cargoDamageYn: null,
  remainedAmount: null,
  originalCustName: null,
  batchWorkorderNo: null,
  shippedQtyUnit: null,
  shipperName: null,
  contractAmount: null,
  contractRate: null,
  paymentType: null,
  settlementApplicant: null,
  returnTime: null,
  sourceItemId: null,
  askedTransitFee: null,
  settleBasedOn: null,
  settleBasedOnUnit: null
}
export default {
  name: 'AccountingArList',
  data() {
    return {
      options: {
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
        invoiceNo: null,
        slipNo: null,
        status: null,
        fixStatus: null,
        basicNo: null,
        orderSeqNo: null,
        orderItemNo: null,
        acItemId: null,
        site: null,
        bizKind: null,
        bizUnit: null,
        accUnit: null,
        branchUnit: null,
        payCust: null,
        billToCust: null,
        ptnrYn: null,
        slipDt: null,
        invoiceType: null,
        taxType: null,
        amtCur: null,
        jobDate: null,
        exrate: null,
        curr: null,
        rate: null,
        wtCnt: null,
        frtCd: null,
        frtNm: null,
        invoiceDt: null,
        totFsc: null,
        fuelRate: null,
        miles: null,
        invSettleId: null,
        settlementId: null,
        billNo: null,
        inputType: null,
        autoYn: null,
        pcTerm: null,
        cargoObjectNo: null,
        cargoObjectName: null,
        amount: null,
        paiedFee: null,
        consigneeName: null,
        amtAr: null,
        cargoDamageYn: null,
        remainedAmount: null,
        originalCustName: null,
        batchWorkorderNo: null,
        shippedQtyUnit: null,
        shipperName: null,
        contractAmount: null,
        contractRate: null,
        paymentType: null,
        settlementApplicant: null,
        returnTime: null,
        sourceItemId: null,
        askedTransitFee: null,
        settleBasedOn: null,
        settleBasedOnUnit: null,
        createTime: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      accountingArFormDialog: {
        title: '',
        visible: false
      },
      accountingArFormData: Object.assign({}, defaultAccountingArFormData),
      accountingArFormRules: {
        invoiceNo: [{ required: true, message: '发票号不能为空', trigger: 'blur' }],
        slipNo: [{ required: true, message: '支付流水号不能为空', trigger: 'blur' }]
      },
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.queryParams.createTime = this.$route.query.createTime
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
    },
    handleAdd() {
      this.openAccountingArFormDialog()
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return AccountingArApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openAccountingArFormDialog(id)
    },
    handleQuery() {
      this.loading = true
      AccountingArApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleExport() {
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return AccountingArApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.data)
      })
    },
    openAccountingArFormDialog(id) {
      this.accountingArFormDialog.visible = true
      if (id) {
        this.accountingArFormDialog.title = '财务应收-修改'
        AccountingArApi.get(id).then(response => {
          this.accountingArFormData = {
            ...this.accountingArFormData,
            ...response.data
          }
        })
      } else {
        this.accountingArFormDialog.title = '财务应收-添加'
      }
    },
    confirmAccountingArFormDialog() {
      this.$refs['accountingArForm'].validate(valid => {
        if (valid) {
          if (this.accountingArFormData.id) {
            AccountingArApi.edit(this.accountingArFormData).then(response => {
              this.$message.success('修改成功')
              this.resetAccountingArFormDialog()
              this.handleQuery()
            })
          } else {
            AccountingArApi.add(this.accountingArFormData).then(response => {
              this.$message.success('添加成功')
              this.resetAccountingArFormDialog()
              this.handleQuery()
            })
          }
        }
      })
    },
    resetAccountingArFormDialog() {
      this.accountingArFormDialog = {
        title: '',
        visible: false
      }
      this.accountingArFormData = Object.assign({}, defaultAccountingArFormData)
      this.resetForm('accountingArForm')
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
